<template>
  <div class="main flex">
   <div class="left_bg flex alignCenter center column">
     <img src="@/assets/images/login_bg.png"/>
     <div class="info flex column alignCenter">
       <h1> {{appName}}</h1>
       <h5>{{appDescription}}</h5>
     </div>
   </div>
   <div class="right flex center">
     <div class="login-from flex column alignCenter">
       <a-avatar :size="80"
       :src="appLogoUrl"
       >

       </a-avatar>
       <div>
         <div class="title">
           {{appName}}
         </div>
         <span style="color: #515a6e;font-size: 14px">{{appDescription}}</span>
       </div>
       <a-form
           id="formLogin"
           class="user-layout-login"
           ref="formRef"
           :form="formModel"
           @submit="handleSubmit"
           @keydown.enter="handleSubmit"
       >
<!--         <a-row :gutter="24">
           <a-col :xs="10" :sm="18" :md="24" :lg="24">
             <a-form-item name="userName">
               <a-input v-model:value="formModel.userName" placeholder="请输入用户名">
                 <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
               </a-input>
             </a-form-item>
           </a-col>
         </a-row>-->
         <a-form-item name="userName">
           <a-input v-model:value="formModel.userName" placeholder="请输入用户名">
             <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
           </a-input>
         </a-form-item>
         <a-form-item name="password">
           <a-input v-model:value="formModel.password" type="password" placeholder="请输入密码">
             <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
           </a-input>
         </a-form-item>
         <a-form-item name="captchaCode">
           <div class="code-item">
             <a-input v-model:value="formModel.captchaCode" type="captcha" placeholder="请输入验证码">
               <template #prefix><SafetyOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
             </a-input>
             <img @click="queryCaptcha" :src="captchaUrl"/>
           </div>
         </a-form-item>
         <a-form-item>
           <a-checkbox v-model:checked="formModel.rememberMe">记住我</a-checkbox>
         </a-form-item>

         <a-form-item style="margin-top:24px">
           <a-button
               size="large"
               type="primary"
               htmlType="submit"
               class="login-button"

           >登录</a-button>
         </a-form-item>

       </a-form>
     </div>
   </div>

  </div>
</template>
<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import JSEncrypt from 'jsencrypt';
import { UserOutlined, LockOutlined,SafetyOutlined } from '@ant-design/icons-vue';
import {login,getCaptcha} from "@/api";
import {LoginFrom} from "@/types/global.ts";
import {useSystemStore} from "@/stroe";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
const router = useRouter();
const systemStore = useSystemStore();

const appName = import.meta.env.VITE_APP_NAME;
const appDescription = import.meta.env.VITE_APP_DESCRIPTION;
const appLogoUrl = import.meta.env.VITE_APP_LOGO;
const captchaUrl = ref('');
const rememberMe = computed(()=>systemStore.rememberMe)
  const generateForm = ():LoginFrom=>{
  return{
    userName:'',
    password:'',
    captchaCode:'',
    key:'',
    rememberMe:rememberMe.value
  }
}
  const formModel = ref(generateForm())
  const formRef = ref()
 /* const rules: Record<string, Rule[]> = {
    userName: [
      { required: true, message: '请输入用户名',trigger: 'blur'},
    ],
    password: [{ required: true, message: '请输入密码',trigger: 'blur' }],
    captchaCode: [{ required: true, message: '请输入验证码',trigger: 'blur'}],

  };*/
  const queryCaptcha = ()=>{
    getCaptcha().then((res:any)=>{
      captchaUrl.value = res.result.captcha
      formModel.value.key = res.result.key
    })
  }
  const encryption = (data:string)=>{
    const jsEncrypt = new JSEncrypt();
    jsEncrypt.setPublicKey(import.meta.env.VITE_APP_RSA_PUBLICKEY)
    const encryptedData = jsEncrypt.encrypt(data);


    return encryptedData.toString();
  }
  const handleSubmit = ()=>{
    const key = new Date().getTime().toString();
   const loading =  message.loading({content:'登陆中',duration:0,key})
    const from = {
      ...formModel.value,
      password:encryption(formModel.value.password)
    }
    login(from).then((res:any)=>{
      message.success({content:'登陆成功',key})
      systemStore.setUserInfo(res.result.userInfo)
      systemStore.setRememberMe(formModel.value.rememberMe)
      router.push({name:'home'})
    }).finally(()=>{
      loading();
      formModel.value = generateForm();
      queryCaptcha();
    })
  }

  onMounted(()=>{
    if(rememberMe.value){
      router.push({name:'home'})
    }
    queryCaptcha()
  })
</script>
<style scoped lang="scss">
.main{
  height: 100vh;
  overflow: hidden;

}
@media screen and ( max-width:800px) {
  .left_bg{
    display: none;
  }
  .right{
    width: 80%;
    overflow: hidden;
    margin:0 auto;
    .login-from{
      width: 100%;
      margin-top: 20px;
      .title{
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;
      }
      :deep(.ant-input-affix-wrapper){
        padding: 7px 11px;
      }
      .login-button{
        width: 100%;
      }
      #formLogin{
        width: 100%;
        margin-top: 20px;
      }
      .code-item{
        position: relative;
        display: flex;
        align-items: center;
        img{
          position: absolute;
          right: 5px;
          width:100px;
          //height:100%;
          z-index: 999;
        }
      }
    }
  }
}
@media screen and ( min-width:750px) {
  .left_bg{
    width: 50%;
    background-color: #2058c6;
    overflow: hidden;
    img{
      width: 502px;
      height: 421px;
      object-fit: cover;
    }
    color: #fff;
  }
  .right{
    width: 50%;
    overflow: hidden;
    .login-from{
      width: 70%;
      margin-top: 20px;
      .title{
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;
      }
      :deep(.ant-input-affix-wrapper){
        padding: 7px 11px;
      }
      .login-button{
        width: 100%;
      }
      #formLogin{
        width: 420px;
        margin-top: 20px;
      }
      .code-item{
        position: relative;
        display: flex;
        align-items: center;
        img{
          position: absolute;
          right: 5px;
          width:100px;
          //height:100%;
          z-index: 999;
        }
      }
    }
  }
}

</style>
